<style lang="scss">

  .v-modal {
    z-index: 10 !important;
  }
 
  .filter-bar-query{
    height: 40px;
    padding: 0 10px;
    border-bottom: 1px solid #e5e5e5;
    line-height: 35px;
  }
  .icon-sendRole{
    font-size:16px;
    font-weight:bold;
  }
  .btn-text{
    font-size:8px
  }
</style>
<template>
   <div class="filter-bar-query" >
     <el-row >
       <!--<el-col :span="4"  >
         <p class="icon-sendRole">发送通道</p>
      </el-col>-->
      <el-col :span="4">
         <el-button size="small" type="primary" class="el-icon-plus" @click="newBuildSendWay"> 新建发送通道</el-button>
      </el-col>
    </el-row>
    <template>
      <div style="margin-top:25px;" >
      <el-table :data="sendRoleData">
        <el-table-column prop="roleName" label="通道名称" min-width="15%" class="alarmLevel"></el-table-column>
        <el-table-column prop="roleType" label="通道类型" min-width="15%"></el-table-column>
        <el-table-column prop="serviceLevel" label="服务级别" min-width="15%"></el-table-column>
        <el-table-column prop="status" label="状态" min-width="20%"></el-table-column>
        <el-table-column prop="alarm" label="告警" min-width="20%"></el-table-column>
        <el-table-column class="operation" prop="" label="操作" min-width="15%" > 
             <template scope="scope" type="small">
                <el-button class="btn-text" type="text" @click="editSendWay">编辑</el-button>
                <el-button class="btn-text" type="text" @click.native.prevent="deleteRow(scope.$index,sendRoleData)">删除</el-button>
                <el-button class="btn-text" type="text" @click="start(scope.row)">启用</el-button>
             </template>
        </el-table-column>
        
      </el-table>     
      </div> 
    </template>
    <div>
     
        <el-button size="small">取 消</el-button>
        <el-button type="primary" size="small" >确 定</el-button>
    </div>
  </div>
</template>
<script>
 
  import { Table, TableColumn, Row, Col, Button, Input, Message, Tree, Checkbox, CheckboxGroup, Dialog, Pagination, Tag } from 'element-ui'
  export default {
    data() {
      return {
       sendRoleData:[{
         roleName: '电话-1',
         roleType: '电话',
         serviceLevel: '五级',
         status: '未用',
         alarm:'A-1'
       },
       {
         roleName: 'SMS-1',
         roleType: 'SMS',
         serviceLevel: '四级',
         status: '未用',
         alarm:'A-2'
       },
       {
         roleName: 'email-1',
         roleType: 'email',
         serviceLevel: '三级',
         status: '未用',
         alarm:'A-2'
       },
       {
         roleName: 'Onduty-1',
         roleType: 'Onduty',
         serviceLevel: '二级',
         status: '启用',
         alarm:'A-3'
       },
       {
         roleName: 'Onduty-2',
         roleType: 'Onduty',
         serviceLevel: '一级',
         status: '启用',
         alarm:'A-4'
       }] ,
      allData: [{
        
      }]

      }; 
      
    },
    methods:{
      start(row){
        row.status = row.status === '未用' ? '启用' : '启用'
        this.$forceUpdate()
        return Message('已改变状态')
        // this.$set(row, 'status', row.status === '未用' ? '启用' : '未用')
      
      },
      deleteRow(index, rows) {
        rows.splice(index, 1);
         return Message('已删除当前通道')
      },
      editSendWay() {
        this.$router.push({
          name: 'sendlist-editbuild'
        })
      },
      newBuildSendWay () {
        this.$router.push({
          path: 'newbuild'
        })
      }
    },
    components: {
      'el-table': Table,
      'el-table-column': TableColumn,
      'el-row': Row,
      'el-col': Col,
      'el-button': Button
      
    }
  }
</script>
 

